<template>
  <div>
    <div :class="{'is-mobile':isMobile}" class="stock-out-title">
      <div class="title">
        <div><SectionTitle title="出库记录" /></div>
        <el-tooltip placement="top">
          <div slot="content">数据每日自动刷新。</div>
          <tipIcon is-diy class="ml5"/>
        </el-tooltip>
      </div>
      <div v-if="hasRouteAuth('mengli:commerceOrder:read')" class="title-tip">
        出库记录数据来源萌力订单-电商销售，如需补录请去
        <span style="color: #406eff; cursor: pointer" @click.prevent="goMengliOrderPage(null)">萌力订单-电商销售</span>
        操作。
      </div>
      <el-date-picker
        v-model="rangeDate"
        :picker-options="pickerOptions()"
        format="yyyy/MM/dd"
        type="daterange"
        size="small"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="queryStockOutLog()"/>
    </div>
    <div :class="{'is-mobile':isMobile}" class="data-container">
      <template v-for="item in labels">
        <div :key="item.key" class="data-item">
          <img :src="item.icon" :alt="item.label">
          <div class="label">{{ item.label }}：</div>
          <div class="num">{{ stockOutLog[item.key] | filterNon }}</div>
          <div v-if="item.isJump && hasRouteAuth('mengli:commerceOrder:read')" class="action" @click="goMengliOrderPage(item.key)" >查看 ></div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import stockOutIcon1 from '@/assets/mengli/inventory/stock_out_icon1.png';
import stockOutIcon2 from '@/assets/mengli/inventory/stock_out_icon2.png';
import stockOutIcon3 from '@/assets/mengli/inventory/stock_out_icon3.png';
import stockOutIcon4 from '@/assets/mengli/inventory/stock_out_icon4.png';
import stockOutIcon5 from '@/assets/mengli/inventory/stock_out_icon5.png';
import stockOutIcon6 from '@/assets/mengli/inventory/stock_out_icon6.png';
import { getStockOutLog } from '@/api/mengli';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { pickerOptions } from '../../utils';
import { filterNon } from '@/filters';
import { hasRouteAuth } from '@/utils/permission';
export default {
  filters: {
    filterNon
  },
  components: {
    SectionTitle
  },
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      stockOutIcon1,
      stockOutIcon2,
      stockOutIcon3,
      stockOutIcon4,
      stockOutIcon5,
      stockOutIcon6,
      rangeDate: '',
      stockOutLog: {}
    };
  },
  computed: {
    rangeKeyArr() {
      return [{
        attr: 'rangeDate',
        start: 'startTime',
        end: 'endTime',
        type: 'time'
      }];
    },
    labels() {
      return [
        { label: '总订单数量', key: 'totalOrderQuantity', icon: stockOutIcon1, isJump: true },
        { label: '总出库数量', key: 'totalStockOutQuantity', icon: stockOutIcon2 },
        { label: '线上订单数量', key: 'onlineOrderQuantity', icon: stockOutIcon3, isJump: true },
        { label: '线上订单出库数量', key: 'onlineStockOutQuantity', icon: stockOutIcon4 },
        { label: '线下订单数量', key: 'offlineOrderQuantity', icon: stockOutIcon5, isJump: true },
        { label: '线下订单出库数量', key: 'offlineStockOutQuantity', icon: stockOutIcon6 }
      ];
    }
  },
  created() {
    this.queryStockOutLog();
  },
  methods: {
    hasRouteAuth,
    pickerOptions,
    queryStockOutLog() {
      const id = Number(this.$route.params.id) || '';
      const params = { id };
      if (this.rangeDate) {
        params.rangeDate = this.rangeDate;
        paramsRangeFormat(this.rangeKeyArr, params);
      }
      getStockOutLog(params).then(res => {
        this.stockOutLog = res.data;
      });
    },
    goMengliOrderPage(key) {
      const query = Object.create(null);
      query.stop = true;
      if (key) {
        query.code = this.detailData.code;
        query.rId = this.detailData.repository && this.detailData.repository.repositoryId;
        if (this.rangeDate && this.rangeDate.length) {
          const st = this.rangeDate[0].getTime();
          const et = this.rangeDate[1].getTime() + (24 * 3600 - 1) * 1000;
          query.rangeDate = JSON.stringify({ st, et });
        }
      } else {
        query.empty = 1;
      }
      if (key === 'onlineOrderQuantity') {
        query.orderChannel = 0; // 线上订单
      } else if (key === 'offlineOrderQuantity') {
        query.orderChannel = 1; // 线下订单
      }
      const url = this.$router.resolve({
        name: 'mengliOrder',
        query
      });
      window.open(url.href, '_blank');
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-date-editor {
  width: 260px;
  .el-range-editor--small .el-range-input {
    font-size: 14px;
  }
  .el-range-separator {
    width: 22px;
  }
}
.options-btn-group {
  position: absolute;
  right: 0;
}
.data-container {
  background: #fafafc;
  border-radius: 4px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  .data-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    padding-bottom: 6px;
    min-width: 260px;
    width: 23%;
    &:not(:nth-of-type(4n)) {
      border-right: 1px solid #DDE1EA;
    }
    &:last-child {
      margin-right: 0;
    }
    img {
      width: 16px;
      margin-right: 5px;
    }
    .label {
      font-size: 14px;
      line-height: 14px;
      color: #999;
    }
    .num {
      font-size: 16px;
      font-family: DIN Alternate, DIN Alternate-Bold;
      font-weight: 700;
      color: #5f77c3;
    }
    .action {
      margin-left: 12px;
      color: #406eff;
      cursor: pointer;
    }
  }
  &.is-mobile {
    flex-wrap: nowrap !important;
    .data-item {
      width: 50%;
      padding-right: 10px;
      margin-right: 10px;
      min-width: fit-content;
    }
    @include scrollBar($x: auto, $y: auto);
  }
}
.stock-out-title {
  display: flex;
  align-items: center;
  margin: 32px 0 16px 0;
  &.is-mobile {
    display: block;
    .title-tip {
      margin: 10px 0;
    }
  }
  .title {
    margin-right: 10px;
    display: flex;
    align-items: center;
  }
  .title-tip {
    font-size: 14px;
    color: #999;
    flex: 1;
  }
}
</style>
